<template>
  <div class="gl_contentBox gl_heightFull">
    <div class="demo-input-suffix gl_searchBox">
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>{{ $t('logCenter.type') }}</p>
          <el-select v-model="Api_GET_BusinessLogQO.Type" :placeholder="$t('search.whole')" size="mini" filterable clearable @change="findList()">
            <el-option v-for="(data,index) in Type" :key="index" :label="data.value" :value="data.code" />
          </el-select>
        </el-col>
        <el-col :md="6" :lg="4">
          <p>{{ $t('logCenter.module') }}</p>
          <el-select v-model="Api_GET_BusinessLogQO.Module" :placeholder="$t('search.whole')" size="mini" filterable clearable @change="findList()">
            <el-option v-for="(data,index) in Module" :key="index" :label="data.value" :value="data.code" />
          </el-select>
        </el-col>
        <el-col :md="10" :lg="6" :xl="4">
          <p>{{ $t('logCenter.logTime') }}</p>
          <el-date-picker
            v-model="freeDay"
            type="daterange"
            :range-separator="$t('logCenter.to')"
            :start-placeholder="$t('logCenter.timeS')"
            :end-placeholder="$t('logCenter.timeS')"
            size="mini"
            value-format="yyyy-MM-dd"
            style="width:100%"
            @change="timeChange"
          />
        </el-col>
        <el-col :md="6" :lg="4">
          <p>{{ $t('logCenter.userName') }}</p>
          <el-input v-model="Api_GET_BusinessLogQO.UserName" :placeholder="$t('logCenter.enter')" size="mini" clearable @change="findList()" />
        </el-col>
        <el-col :md="6" :lg="4">
          <el-button style="margin-top:27px" type="primary" size="mini" @click="clickFind()">{{ $t('button.query') }}</el-button>
          <el-button style="margin-top:27px" type="warning" size="mini" @click="clickReset()">{{ $t('button.Reset') }}</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="total_amount" />
    <div id="Tabel">
      <el-table v-loading="loading" :data="tableData" stripe size="mini" style="width: 100%">
        <template v-for="(data,index) in tabelClounm">
          <template v-if="data.prop === 'actionTime'">
            <el-table-column :key="index" :prop="data.prop" :label="$t(data.label)" :align="data.align" :width="data.width">
              <template slot-scope="{row}">
                <span v-if="row.actionTime">
                  {{ row.actionTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}
                </span>
              </template>
            </el-table-column>
          </template>
          <!-- 操作内容隐藏展示 -->
          <template v-else-if="data.prop === 'actionContent'">
            <el-table-column :key="index" :label="$t(data.label)" :align="data.align" :width="data.width">
              <template slot-scope="scope">
                <el-popover
                  placement="top-start"
                  width="500"
                  trigger="hover"
                  :content="scope.row.actionContent"
                >
                  <span slot="reference" class="gl_ellipsis">{{ scope.row.actionContent }}</span>
                </el-popover>
              </template>
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column :key="index" :prop="data.prop" :label="$t(data.label)" :align="data.align" :width="data.width" />
          </template>
        </template>
      </el-table>
    </div>
    <el-row class="gl_pt_20" style="text-align: center;">
      <el-pagination
        :current-page="Api_GET_BusinessLogQO.Page"
        :page-size="Api_GET_BusinessLogQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Api_GET_BusinessLogQO } from '@/lib/form/swaggerForm';
import { api_GET_BusinessLog } from '@/extend/api/swaggerApi/app.js';

export default {
  name: 'LogManagement',
  data() {
    return {
      Api_GET_BusinessLogQO: new Api_GET_BusinessLogQO(),
      loading: false,
      freeDay: [], // 时间组合
      totalPage: 0,
      // currentPage: 1,
      Type: [], // 查询日志类型
      Module: [], // 查询操作模块
      tabelClounm: [ // 表头信息
        {
          prop: 'userName',
          label: 'logCenter.userName',
          width: '140'
        },
        {
          prop: 'typeName',
          label: 'logCenter.type',
          width: '150'
        },
        {
          prop: 'actionTime',
          label: 'logCenter.actionTime',
          width: '180',
          align: 'center'
        },
        {
          prop: 'moduleName',
          label: 'logCenter.module',
          width: '190'
        },
        {
          prop: 'actionObject',
          label: 'logCenter.actionObject',
          width: '190'
        },
        {
          prop: 'actionContent',
          label: 'logCenter.actionContent',
          tooltip: true
        },
        {
          prop: 'result',
          label: 'logCenter.result',
          width: '140',
          align: 'center'
        }
      ],
      tableData: [] // 储存渲染表格的数据
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.findList();
    this.getDict().then(res => {
      this.Type = res.logType;
      this.Module = res.logModule;
    });
  },
  methods: {
    // 获取字典
    ...mapActions({ getDict: 'dict/getDict' }),
    // 查询
    findList(page) {
      console.log(page);
      this.loading = true;
      this.Api_GET_BusinessLogQO.Page = page || 1;
      this.Api_GET_BusinessLogQO.SkipCount = (this.Api_GET_BusinessLogQO.Page - 1) * this.Api_GET_BusinessLogQO.MaxResultCount;
      api_GET_BusinessLog(this.Api_GET_BusinessLogQO).then(res => {
        this.tableData = res.items;
        this.totalPage = res.totalCount;
        this.loading = false;
      })
        .catch(() => {
          this.loading = false;
        });
    },
    // 点击查询
    clickFind() {
      this.findList();
    },
    // 日历选择器给QO赋值
    timeChange(val) {
      if (val instanceof Array) {
        this.Api_GET_BusinessLogQO.ActionTimeMin = this.freeDay[0];
        this.Api_GET_BusinessLogQO.ActionTimeMax = this.freeDay[1];
      } else {
        this.Api_GET_BusinessLogQO.ActionTimeMin = '';
        this.Api_GET_BusinessLogQO.ActionTimeMax = '';
      }
      this.findList();
    },
    // 重置表单
    clickReset() {
      this.Api_GET_BusinessLogQO = new Api_GET_BusinessLogQO();
      this.freeDay = [];
      this.findList();
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_BusinessLogQO.MaxResultCount = MaxResultCount;
      this.findList();
    },
    pageIndexChange(currentPage) {
      this.findList(currentPage);
    }
  }
};
</script>

<style lang="css" scoped>
.total_amount{
  height:20px;
}
</style>
